<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <div class="flex w-full bg-[#213743] items-center mb-4">
      <div
        class="max-w-[1200px] px-4 xl:px-0 w-full m-auto flex justify-between items-center h-[60px] xl:h-[115px]"
      >
        <h1 class="text-[1rem] xl:text-[1.6rem] font-bold">
          <p>{{ business_code }}</p>
        </h1>
        <div class="relative">
          <div
            v-if="business_code.length"
            class="absolute right-4 top-10 text-4xl"
            @click="router.go(-1)"
          >
            ×
          </div>
          <img
            class="w-[12rem] xl:w-[24rem]"
            src="../../assets/gams/group-banner-default.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div
      class="w-full max-w-[1200px] px-4 xl:px-0 m-auto p-4 mb-4 items-center"
    >
      <div
        class="grid gap-x-8 gap-y-4 grid-cols-7 providerBox"
        v-if="!business_code.length"
      >
        <div
          v-for="item in boxList"
          class="grid gap-4 content-start"
          @click="businessDeit(item)"
        >
          <!-- <div
              :style="
                'background-image:url(' +
                detailsData.static_base_url +
                item.logo +
                ')'
              "
              class="imgpic bgcimg rounded-lg shadow-[0 4px 6px -1px rgba(27, 23, 23, .2), 0 2px 4px -1px rgba(0, 0, 0, .12)]"
            ></div> -->
          <img
            class="imgpic rounded-lg shadow-[0 4px 6px -1px rgba(27, 23, 23, .2), 0 2px 4px -1px rgba(0, 0, 0, .12)]"
            :src="detailsData.static_base_url + item.logo"
            alt=""
          />
        </div>
      </div>

      <div v-else>
        <operatorSearch :business_code="business_code" ref="operatorSearchs" />
        <div>
          <gameBox :games="gameDataList" />
          <p v-if="gameDataList?.length" class="text-[#b1bad3] text-center">
            {{
              $t("page.casino.showtext1") +
              showtotal +
              $t("page.casino.showtext2") +
              gameDataList.length +
              $t("page.casino.showtext3")
            }}
          </p>
          <div
            v-if="showNextPage"
            @click="nextPage"
            class="w-[120px] m-auto mt-2 text-center bg-[#2f4553] text-white hover:bg-[#557086] px-4 py-2 rounded cursor-pointer"
          >
            {{ $t("page.casino.more") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onActivated, defineAsyncComponent } from "vue";
import { gameBusinessList } from "../../api/casion.js";
import { mainAct } from "../../store/activeda";
import operatorSearch from "../../components/operatorSearch/index.vue";
import { eventBus } from "@/utils/eventBus.js";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const gameBox = defineAsyncComponent(() =>
  import("../../components/gameSwiper/gameBox.vue")
);
const detailsData = mainAct();
const boxList = ref([]);
const gameDataList = ref([]);
const currentPage = ref(1);
const business_code = ref("");
const showNextPage = ref(false);
const showtotal = ref(null);

eventBus.on("businessDeitChange", val => {
  gameDataList.value = [];
  businessDeit(val);
});

const nextPage = () => {
  currentPage.value += 1;
  getDataList();
};
// const gameBusinessList = gameBusinessList;
const getDataList = () => {
  let data = {
    page: currentPage.value,
    page_size: 20,
    variables: "",
    business_code: business_code.value
  };
  gameBusinessList(data)
    .then(res => {
      if (res.errno == 0 && res.data.list?.length) {
        showtotal.value = res.data?.total;
        if (res.data.total > res.data.page * res.data.page_size) {
          showNextPage.value = true;
        } else {
          showNextPage.value = false;
        }
        res.data.list.forEach(item => {
          if (!item.img_url.startsWith("http")) {
            item.img_url = detailsData.static_base_url + item.img_url;
          }
        });
        gameDataList.value.push(...res.data.list);
      }
    })
    .catch(err => {
      console.log("err", err);
    });
};

onActivated(() => {
  business_code.value = route.query.code;
  gameDataList.value = [];
  getDataList();
});

const operatorSearchs = ref(null);
const businessDeit = item => {
  currentPage.value = 1;
  gameDataList.value = [];
  business_code.value = item.code;
  getDataList();
};
</script>
<style scoped lang="less">
.providerBox {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media screen and (max-width: 700px) {
  .providerBox {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media screen and (max-width: 1000px) and (min-width: 701px) {
  .providerBox {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media screen and (max-width: 1280px) and (min-width: 1001px) {
  .providerBox {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media screen and (max-width: 1600px) and (min-width: 1281px) {
  .providerBox {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
.imgpic {
  transition: 0.3s;
}
.imgpic:hover {
  transform: translateY(-4%);
}
.bgcimg {
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
